<template>
    <div>
        <a-form :form="form" layout="inline" @submit.prevent="onSubmit" id="goodsSearch" :style="{marginBottom: '20px'}">
            <div class="goods-query">
                <a-form-item>
                    <a-input placeholder="请输入产品名称" v-decorator="['name']"/>
                </a-form-item>
                <a-form-item :style="{flexGrow: 1}">
                    <a-button type="primary" html-type="submit">筛选</a-button>
                </a-form-item>
                <a-form-item>
                    <router-link to="/goods/create">
                        <a-button type="primary" v-if="menu_role.includes('/goods/create')" icon="plus">添加</a-button>
                    </router-link>
                </a-form-item>
            </div>
        </a-form>

        <a-table :columns="columns" :dataSource="tableData" rowKey="id" :pagination="pagination" bordered>
            <template slot="image" slot-scope="text, record">
                <img :src="record.image" style="width:64px;height:64px" alt="图片">
            </template>
            <template slot="action" slot-scope="text, record">
                <div class="delete-image">
                <router-link :to="'/goods-update/'+record.id">
                    <img src="./../../assets/images/view.svg"
                         alt="">
                </router-link>
                <a href="#"  v-if="menu_role.includes('/goods/delete')" @click.stop.prevent="handleDelete(record)"><img
                        src="./../../assets/images/delete.svg" alt=""></a>
                </div>
            </template>
        </a-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pagination: {
                    current: 1,
                    total: 0,
                    pageSize: 10,
                    showQuickJumper: true,
                    onChange: (page, size) => {
                        this.handleChange(page, size);
                    }
                },
                tableData: [],
                columns: [
                    {title: "序号", dataIndex: "id", align: "center"},
                    {title: "产品名称", dataIndex: "name", align: "center"},
                    {title: "产品分类", dataIndex: "catename", align: "center"},
                    {title: "图片", scopedSlots: {customRender: "image"}, align: "center"},
                    {title: "价格", dataIndex: "price", align: "center"},
                    {title: "价格单位", dataIndex: "unit", align: "center"},
                    {title: "影像分辨率", dataIndex: "resolution", align: "center"},
                    {title: "状态", dataIndex: "status", align: "center"},
                    {title: "推荐", dataIndex: "is_recommend", align: "center"},
                    {
                        title: "操作",
                        scopedSlots: {customRender: "action"},
                        align: "center",
                        width: 165
                    }
                ],
                form: this.$form.createForm(this),
            };
        },

        mounted() {
            this.getList();
        },
        methods: {
            async getList(param = {}) {
                let req = {
                    page_size: this.pagination.pageSize,
                    page: this.pagination.current
                };

                let data = await this.http(
                    "get",
                    "goods/index",
                    Object.assign(req, param)
                );
                this.tableData = data.data;
                this.pagination.total = data.total_count;
            },
            onSubmit() {
                //搜索提交
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.pagination.current = 1;
                        this.getList(values);
                    }
                });
            },
            handleChange(page, size) {
                //列表展示条数改变
                this.pagination.current = page;
                this.pagination.pageSize = size;
                this.getList();
            },
            handleDelete(row) {
                var that = this;
                this.$confirm({
                    title: "删除产品",
                    content: "你确定要删除该产品吗？",
                    onOk() {
                        that.deleteData(row.id).then(res => {
                            if (res.status == "success") {
                                that.$message.success(res.msg);
                                that.getList();
                            } else {
                                that.$message.error(res.msg);
                            }
                        });
                    },
                    onCancel() {
                    }
                });
            },
            async deleteData(id) {
                let data = await this.http("delete", "goods/delete", {id: id});
                return data;
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "./../../assets/scss/mixin";

    #goodsSearch {
        .ant-input {
            width: 250px;
        }
    }
    .goods-query {
        @include fj(space-between);
        .ant-form-item + .ant-form-item{
            margin-left: 10px;
        }
    }
</style>
